<script>

var auxJson   = 0;
var datacaf02 = 0;
var cod_item  = 0;

function setMesa()
{
	//alert("asd");
	$("#table").val(valKbN);
	$("#tablediv").html('Mesa <b>' + valKbN + '</b>');
}

function voltar()
{
	$("#firstStep").animate({margin: "auto", opacity: 1}, 500);
	$("#secondStep").fadeOut();
}

function setGroup()
{
	//$.post();
	$("#group").val(valKbN);
	$("#groupdiv").val('Pax <b>' + valKbN + '</b>');
}

function showFirstStep()
{
	$("#secondStep").hide();
	$("#firstStep").fadeIn("fast");
}

function savePedido()
{
	if($("#table").val() == "" || $("#group").val() == "")
	{
		msg({vmsg: "Campo(s) vazios.", time: 4000, type:"alert"});

		return;
	}

	edpedido = 0;
	
	$.post('<?php echo $this->base; ?>/pedido/ajaxvermesa', {mesa: $("#table").val()}, function(mes){
		if(mes)
		{
			msg({vmsg:"Mesa ocupada.", time:5000, type:"alert"});

			return false;
		}
		else
		{
			$("#firstStep").animate({marginLeft: -1300, opacity: 0, display: "none"}, 500);
			
			if(cod_item)
			{
				var dat = 'caf02_date=' + $("#caf02_date").val() + '&caf02_cod=' + cod_item + '&caf02_cod_user=' + auxJson.caf01_cod + '&caf02_mesa=' + $("#table").val() + '&caf02_group=' + $("#group").val() + "&caf02_active=1";
		
				$.post('<?php echo $this->base; ?>/pedido/save', dat, function(req){
					$("#secondStep").css("marginTop", "10px").show();
				});
			}
			else
			{
				var dat = 'caf02_date=' + $("#caf02_date").val() + '&caf02_cod=0&caf02_cod_user=' + user.caf01_cod + '&caf02_mesa=' + $("#table").val() + '&caf02_group=' + $("#group").val() + "&caf02_active=1";
				
				$.ajax({
					type: "post",
					url: '<?php echo $this->base; ?>/pedido/save',
					data: dat,
					success: function(cod_it){
						cod_item = cod_it;
		
						pedido = true;
						
						$.post('<?php echo $this->base; ?>/pedido/pedido', {cod_mesa: cod_it}, function(req){
							$("#secondStep").html(req).show();
							$("#labelUser").html(auxJson.caf01_user);
							$("#labelTable").html("Mesa " + $("#table").val());		
							$("#labelPax").html("Pax " + $("#group").val());
						});
					}
				});
			}
		}
	});
}

function allowLogin()
{
	/*$("#tablediv").removeAttr("disabled");
	$("#addIten").removeAttr("disabled");
	$("#groupdiv").removeAttr("disabled");
	$('#divAllBtn').css('opacity', 1); */
	
}

</script>

<style>
	#tabs { height: 200px; } 
	.tabs-bottom { position: relative; } 
	.tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } 
	.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
	.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
	.ui-tabs-selected { margin-top: -3px !important; }
	
	#keyNumTab tr td div{
	padding: 20px;
	font-size: 36px;
	border: 1px solid gray;
	width: 86px;
	background-image: url('<?php echo $this->base; ?>/public/images/bg_bt.png');
	background-repeat: repeat-x;
	background-color: #e5e5e5;
	margin: 3px;
	}
</style>

<input type="hidden" id="caf02_date" value="<?php echo date("Y-m-d h:i:s"); ?>" />

<div style="width: 1300px; margin: 0 auto;" id="firstStep">
	<div id="mesa" class="keynum keypadnum" style="float: left; width: 400px; background-color: white; padding: 10px; text-align: center;">
		<div id="titlekeyNum" class="ui-widget ui-corner-all" style="font-size: 22px; color: #FF9900; text-align: left;">
			1. Numero da Mesa
		</div>
		<hr style="border-top: 1px dashed #FF9900; margin-top: 5px; margin-bottom: 5px;" />
		<table border="0" id="keyNumTab" cellpadding="0" cellspacing="0" style="text-align: center; font-size: 40px;">
			<tr>
				<td>
					<div style="margin-left: 0;" class="mesa_num">
						1
					</div>
				</td>
				<td>
					<div class="mesa_num">
						2
					</div>
				</td>
				<td>
					<div class="mesa_num">
						3
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div style="margin-left: 0;" class="mesa_num">
						4
					</div>
				</td>
				<td>
					<div class="mesa_num">
						5
					</div>
				</td>
				<td>
					<div class="mesa_num">
						6
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div style="margin-left: 0;" class="mesa_num">
						7
					</div>
				</td>
				<td>
					<div class="mesa_num">
						8
					</div>
				</td>
				<td>
					<div class="mesa_num">
						9
					</div>
				</td>
			</tr>
		</table>
		<input id="table" maxlength="3" type="text" class="ui-widget ui-corner-all" value="" style="text-align: center; width: 388px; font-size: 24px; margin-top: 5px;" />
	</div>

	<div class="keynum keypadnum" style="float: left; margin-left: 10px; width: 400px; padding: 10px; padding-left: 20px; background-image: url('<?php echo $this->base; ?>/public/images/sep_ver.png'); background-repeat: no-repeat; background-position: 0 50%;">
	
		<div id="titlekeyNum" class="ui-widget ui-corner-all" style="font-size: 22px; color: #FF9900; text-align: left;">
			2. Numero do PAX
		</div>
		<hr style="border-top: 1px dashed #FF9900; margin-top: 5px; margin-bottom: 5px;" />
		<table border="0" id="keyNumTab" cellpadding="0" cellspacing="0" style="text-align: center; font-size: 40px;">
			<tr>
				<td>
					<div class="pax_num" style="margin-left: 0;">
						1
					</div>
				</td>
				<td>
					<div class="pax_num">
						2
					</div>
				</td>
				<td>
					<div class="pax_num">
						3
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="pax_num" style="margin-left: 0;">
						4
					</div>
				</td>
				<td>
					<div class="pax_num">
						5
					</div>
				</td>
				<td>
					<div class="pax_num">
						6
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="pax_num" style="margin-left: 0;">
						7
					</div>
				</td>
				<td>
					<div class="pax_num">
						8
					</div>
				</td>
				<td>
					<div class="pax_num">
						9
					</div>
				</td>
			</tr>
		</table>
		<input id="group" maxlength="3" type="text" class="ui-widget ui-corner-all" value="" style="text-align: center; width: 388px; font-size: 24px; margin-top: 5px; float: left;" />
	</div>
	
	<div class="keypadnum" style="float: left; width: 400px; height: 375px; padding: 10px; padding-left: 20px; margin-left: 10px; background-image: url('<?php echo $this->base; ?>/public/images/sep_ver.png'); background-repeat: no-repeat; background-position: 0 50%;">
		<div id="titlekeyNum" class="ui-widget ui-corner-all" style="font-size: 22px; color: #FF9900; text-align: left;">
			3. Confirmar
		</div>
		<hr style="border-top: 1px dashed #FF9900; margin-top: 5px; margin-bottom: 8px;" />
		<div style="font-size: 19px; padding: 5px; border: 1px solid #009900;" class="ui-corner-all">
			<table>
				<tr>
					<td>
						Funcionario
					</td>
					<td>
						
					</td>
					<td>
						<label style="font-weight: bold;" id="confirm_func"></label>
					</td>
				</tr>
				<tr>
					<td>
						Data
					</td>
					<td>
						
					</td>
					<td>
						<label style="font-weight: bold;"><?php echo date("d/m/Y h:i"); ?></label>
					</td>
				</tr>
				<tr>
					<td>
						Mesa
					</td>
					<td>
						
					</td>
					<td>
						<label style="font-weight: bold;" id="confirm_mesa">-</label>
					</td>
				</tr>
				<tr>
					<td>
						Pax
					</td>
					<td>
						
					</td>
					<td>
						<label style="font-weight: bold;" id="confirm_pax">-</label>
					</td>
				</tr>
			</table>
		</div>
		<div id="addIten" onclick="savePedido();" class="button ui-corner-all" style="padding: 30px; font-size: 20px; margin-top: 10px; font-weight: bold; text-align: center;" >
			Itens Pedido
		</div>
	</div>
	
</div>

<div id="secondStep" style="display: none;">

</div>

<script>
//keybnumShow({title: 'Mesa', elm: '#table', popup: 0});
$(".keynum tr td div").addClass("ui-corner-all");

$("#confirm_func").html(user.caf01_user);

$(".keypadnum tr td div").click(function(){
	var au = $(this).attr("class");

	if(au == "mesa_num ui-corner-all")
	{
		au = "#table";
		vconfirm = "#confirm_mesa";
	}
	if(au == "pax_num ui-corner-all")
	{
		au = "#group";
		vconfirm = "#confirm_pax";
	}
	
	if(!$(au).attr("disabled"))
	{
		var nTxt = $(au).val() + parseInt($(this).html());

		$(au).focus();

		if($(au).val().length < 3)
		{
			$(au).val(nTxt);
		}
		
		/*if($("#userNumberTxt").val().length == 3)
		{
			//getPass();
		}*/
	}

	$(vconfirm).html(nTxt);
});
</script>